<template>
  <div class="chart-container">
    <div class="chart-box">
      <div ref="mainChart" class="mainChart" style="z-index: 9" />
      <div class="handle-box" :style="{ zIndex: showCursor ? 10 : 0 }">
        <div :style="handleStyle" class="handle-content">
          <div v-for="n in xNumber + 1" :key="n" draggable="true" style="position: relative; " @dragstart="handleDragStart($event, n)" @dragover.prevent="handleDragOver($event, n)" @dragenter="handleDragEnter($event, n)" @dragend="handleDragEnd($event, n)">
            <div v-show="showCursor" style="position: absolute; height: 100%; display: flex; justify-content: center; z-index: 2; ">
              <div :style="getLineStyle(n)" />
              <div v-if="n === cursor1 || n === cursor2" style="position: absolute; bottom: -18px; font-size: small; white-space: nowrap; border-radius: 18px; background-color: rgb(230, 162, 60); color: rgb(242, 246, 252); padding: 3px 5px; cursor: move; ">{{ n === cursor1 ? '光标1' : '光标2' }}</div>
            </div>
            <div v-if="n === currentPoint + 1" style="position: absolute; height: 100%; display: flex; justify-content: center; z-index: 1; width: 0;">
              <div style="position: relative; height: 100%; width: 1px; border: 1px solid rgb(221, 97, 97)" />
              <img style="width: 45px; height: 45px; position: absolute; bottom: 28%; left: -45px;" :src="pointIcon" />
              <div style="position: absolute; bottom: 31%; left: 3px; font-size: 5px; color: rgb(233, 30, 99); width: 60px; ">{{ list && list[index] && list[index].signalMachine }}</div>
            </div>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="table-button">
        <el-button type="primary" plain size="mini" @click="xAxisHandle(-10)" round>横向扩展</el-button>
        <el-button type="primary" plain size="mini" @click="xAxisHandle(10)" round>横向收缩</el-button>
        <el-button type="primary" plain size="mini" @click="yAxisHandle(-20)" round>纵向扩展</el-button>
        <el-button type="primary" plain size="mini" @click="yAxisHandle(20)" round>纵向收缩</el-button>
        <el-button v-if="!showCursor" plain type="primary" size="mini" @click="() => showCursor = true" round>光标选择</el-button>
        <el-button v-if="showCursor" type="danger" size="mini" @click="() => showCursor = false" round>取消光标</el-button>
        <span style="margin-left: 10px; ">
          <slot name="chartHandle" />
        </span>
      </div>
      <div class="table-content">
        <el-table :data="cursorList" border size="mini" style="border-radius: 5px; ">
          <el-table-column type="index" label="光标" width="50" align="center" />
          <el-table-column prop="eventItem" label="记录说明" width="150" align="center" />
          <el-table-column prop="time" label="时间" width="160" align="center" />
          <el-table-column prop="kiloMeter" label="公里标" width="120" align="center" />
          <el-table-column prop="distance" label="距离" align="center" />
          <el-table-column prop="speed" label="速度" align="center" />
          <el-table-column prop="rateLimit" label="限速" align="center" />
          <el-table-column prop="speedElectricity" label="转速" align="center" />
          <el-table-column prop="pipePressure" label="管压" align="center" />
          <el-table-column prop="cylinderPressure" label="缸压" align="center" />
          <el-table-column prop="transaction" label="手柄" align="center" />
          <el-table-column prop="signals" label="信号" align="center" />
          <el-table-column prop="signalMachine" label="信号机号" align="center" />
          <el-table-column prop="cylinder1" label="均缸1" align="center" />
          <el-table-column prop="cylinder2" label="均缸2" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Watch,
  Prop,
  Emit,
  Mixins
} from 'vue-property-decorator';
import { Analysis } from '@/views/analysis/mixins';
import LkjChart from './options';
import LkjLayout from '@/views/analysis/layout/lkj/index.vue';
import { AppModule } from '@/store/modules/app';

@Component({
  components: {
    LkjLayout
  }
})
export default class LkjOperaCharts extends Mixins(Analysis) {
  private chart: LkjChart = {} as LkjChart;

  @Prop({
    type: Number,
    default: 0
  })
  index!: number;

  @Prop({
    type: Array,
    default: () => {
      return [];
    }
  })
  list!: any[];

  private dragging: any = null;
  private items: any[] = [];

  private cursor1: number = 10;
  private cursor2: number = 20;

  private showCursor: boolean = false;

  private pointIcon = require('@/assets/image/carw.png');

  get handleStyle() {
    let style = {};
    style = {
      width: this.width + 'px',
      height: this.height + 'px',
      zIndex: 2
    };
    return style;
  }

  get xNumber() {
    return this.chart.xNumber || 0;
  }
  set xNumber(value: number) {
    this.chart.xNumber = value;
  }

  get yMax() {
    return this.chart.yMax || 0;
  }
  set yMax(value: number) {
    this.chart.yMax = value;
  }

  // 当前数据标记下标值
  get currentPoint() {
    const maxPoint = 15;
    const lastMaxPoint = this.xNumber - maxPoint - 1;
    const lastPoint = this.list.length - this.index - 2;
    if (this.index <= maxPoint) {
      return this.index;
    } else if (lastPoint <= lastMaxPoint) {
      return this.xNumber - lastPoint - 1;
    }
    return maxPoint;
  }

  get cursor1Obj() {
    const obj =
      this.list[this.index + this.cursor1 - this.currentPoint - 1] || {};
    return obj;
  }

  get cursor2Obj() {
    const obj =
      this.list[this.index + this.cursor2 - this.currentPoint - 1] || {};
    return obj;
  }

  get cursorList() {
    return [this.cursor1Obj, this.cursor2Obj];
  }

  get currentIndex() {
    console.log('获取了currentIndex', this.index, this.currentPoint);
    return this.index - this.currentPoint;
  }

  get width() {
    return this.chart.width || 0;
  }
  get height() {
    return this.chart.height || 0;
  }

  get isCollapse() {
    return !AppModule.sidebar.opened;
  }

  @Watch('chart')
  @Watch('index', { immediate: true })
  @Watch('list', { immediate: true })
  private onIndexChange() {
    this.chart.list = this.list || [];
    this.chart.index = this.currentIndex;
  }

  private mounted() {
    this.initChart(this.$refs.mainChart as HTMLDivElement);
  }

  @Watch('isCollapse')
  public resize() {
    setTimeout(() => {
      this.chart.resize();
    }, 200);
  }

  private initChart($el: HTMLDivElement): any {
    this.chart = new LkjChart($el, this.list, this.index, this.chartClick);
  }

  @Emit('changeCurrentIndex')
  private chartClick(index: number) {
    return index;
  }

  private getLineStyle(item: number) {
    return {
      width: '1px',
      height: '100%',
      border: `${
        item === this.cursor1 || item === this.cursor2 ? 1 : 0
      }px solid #008989`,
      cursor: 'move'
    };
  }

  private handleDragStart(e: any, item: any) {
    this.dragging = item;
  }
  private handleDragEnd(e: any, item: any) {
    this.dragging = null;
  }
  // 首先把div变成可以放置的元素，即重写dragenter/dragover
  private handleDragOver(e: any, item: any) {
    e.dataTransfer.dropEffect = 'move'; // e.dataTransfer.dropEffect="move"; // 在dragenter中针对放置目标来设置!
  }
  private handleDragEnter(e: any, item: any) {
    e.dataTransfer.effectAllowed = 'move'; // 为需要移动的元素设置dragstart事件
    if (this.dragging === this.cursor1 && item !== this.cursor2) {
      this.dragging = this.cursor1 = item;
    }
    if (this.dragging === this.cursor2 && item !== this.cursor1) {
      this.dragging = this.cursor2 = item;
    }
  }

  private xAxisHandle(num: number) {
    const xNumber = this.xNumber + num;
    if (xNumber > 100 || xNumber <= 20) return;
    this.xNumber = xNumber;
  }

  private yAxisHandle(num: number) {
    const yMax = this.yMax + num;
    if (yMax > 680 || yMax < 120) return;
    this.yMax = yMax;
  }
}
</script>
<style lang="scss" scoped>
.chart-container {
  height: 100%;
  position: relative;
  background-color: rgb(9, 22, 29);
  .chart-box {
    height: 100%;
    .mainChart {
      height: calc(100% - 2rem);
      z-index: 1;
    }
    .handle-box {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 0.4rem;
      .handle-content {
        display: flex;
        justify-content: space-between;
      }
    }
    /deep/.el-divider--horizontal {
      margin: 12px 0;
    }
    .table-button {
      display: flex;
      justify-content: center;
    }
    .table-content {
      display: flex;
      justify-content: center;
      padding: 15px 15px;
    }
  }
}
</style>
